<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="full-screen">
        <video src="./resources/VID_20171007_163952.avi" id="shabi" autoplay muted loop></video>
        <div class="content">
            <img class="illu" src="./resources/illustrator01.png">
            <img class="illu" src="./resources/illustrator02.png">
        </div>
        <img class="letter" src="./resources/letter.png">
        <button class="jump">儿砸 点这儿 >></button>
    </div>

    <script>
        window.onload = function() {
            let letter = document.querySelector(".letter");
            letter.style.display = "none"

            let btn = document.querySelector(".jump");
            btn.addEventListener("click", pageChanging);
            function pageChanging() {
                let content = document.querySelector(".content");
                let letter = document.querySelector(".letter");
                if(letter.style.display == "none") {
                    document.getElementById("shabi").playbackRate = 0.1;
                    content.style.display = "none";
                    letter.style.display = "block";
                    btn.style.top = "75vh";
                    btn.innerHTML = "<<返回";
                } else {
                    document.getElementById("shabi").playbackRate = 1;
                    letter.style.display = "none";
                    content.style.display = "block";
                    btn.style.top = "35vh";
                    btn.innerHTML = "儿砸 点这儿 >>";
                }
                btn.blur();
            }
        }
    </script>
</body>
</html>